<template>
  <div class="visualization-container">
    <!-- 头部导航 -->
    <div class="header-nav">
      <div class="nav-left">
        <button class="nav-btn back-btn" @click="goBack">
          ← 返回模型库
        </button>
        <div class="vehicle-info">
          <h2 class="vehicle-name">{{ currentVehicle.name }}</h2>
          <span class="vehicle-number">编号: {{ currentVehicle.number }}</span>
        </div>
      </div>
      
      <div class="nav-right">
        <div class="status-indicators">
          <div class="status-item" :class="systemStatus.engine">
            <span class="status-dot"></span>
            <span>发动机</span>
          </div>
          <div class="status-item" :class="systemStatus.weapon">
            <span class="status-dot"></span>
            <span>武器系统</span>
          </div>
          <div class="status-item" :class="systemStatus.communication">
            <span class="status-dot"></span>
            <span>通信系统</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 3D视图区域 -->
      <div class="view-section">
        <div class="view-container">
          <!-- 3D模型展示区 -->
          <div ref="threeDContainer" class="threejs-container">
            <div class="model-placeholder">
              <div class="model-preview">
                <img :src="currentVehicle.thumbnail" :alt="currentVehicle.name" />
                <div class="model-overlay">
                  <p>3D模型加载区域</p>
                  <p>点击部件查看详细信息</p>
                </div>
              </div>
            </div>
            
            <!-- 故障高亮标记 -->
            <div 
              v-for="alert in activeAlerts" 
              :key="alert.id"
              class="alert-marker"
              :style="{ 
                left: alert.position.x + '%', 
                top: alert.position.y + '%' 
              }"
              @click="showAlertDetail(alert)"
            >
              <div class="alert-pulse" :class="alert.severity"></div>
              <div class="alert-tooltip">{{ alert.component }}</div>
            </div>
          </div>

          <!-- 视角控制 -->
          <div class="view-controls">
            <h4>视角控制</h4>
            <div class="view-buttons">
              <button 
                v-for="view in viewAngles" 
                :key="view.name"
                class="view-btn"
                :class="{ active: currentView === view.name }"
                @click="changeView(view.name)"
              >
                {{ view.label }}
              </button>
            </div>
            
            <div class="zoom-controls">
              <button class="zoom-btn" @click="zoomIn">🔍+</button>
              <span class="zoom-level">{{ zoomLevel }}%</span>
              <button class="zoom-btn" @click="zoomOut">🔍-</button>
            </div>
          </div>

          <!-- 特殊视角 -->
          <div class="special-views">
            <h4>专项视角</h4>
            <button 
              class="special-view-btn weapon-view"
              :class="{ active: currentSpecialView === 'weapon' }"
              @click="setSpecialView('weapon')"
            >
              🎯 武器系统
            </button>
            <button 
              class="special-view-btn engine-view"
              :class="{ active: currentSpecialView === 'engine' }"
              @click="setSpecialView('engine')"
            >
              ⚙️ 动力系统
            </button>
            <button 
              class="special-view-btn sensors-view"
              :class="{ active: currentSpecialView === 'sensors' }"
              @click="setSpecialView('sensors')"
            >
              📡 传感器
            </button>
          </div>
        </div>
      </div>

      <!-- 侧边信息面板 -->
      <div class="info-panel">
        <!-- 组件信息 -->
        <div class="panel-section">
          <h3 class="section-title">选中组件信息</h3>
          <div v-if="selectedComponent" class="component-info">
            <div class="component-header">
              <h4>{{ selectedComponent.name }}</h4>
              <span class="component-status" :class="selectedComponent.status">
                {{ getStatusText(selectedComponent.status) }}
              </span>
            </div>
            
            <div class="component-details">
              <div class="detail-item">
                <span class="detail-label">类型:</span>
                <span class="detail-value">{{ selectedComponent.type }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">位置:</span>
                <span class="detail-value">{{ selectedComponent.location }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">温度:</span>
                <span class="detail-value">{{ selectedComponent.temperature }}°C</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">运行时间:</span>
                <span class="detail-value">{{ selectedComponent.runtime }}h</span>
              </div>
            </div>

            <!-- 实时数据图表 -->
            <div class="component-charts">
              <h5>实时数据</h5>
              <div class="chart-placeholder">
                <div class="chart-line">📈 温度趋势图</div>
                <div class="chart-line">⚡ 电压监控</div>
                <div class="chart-line">🔧 振动分析</div>
              </div>
            </div>

            <!-- 询问部件功能 -->
            <div class="ask-component">
              <button 
                class="ask-btn"
                @click="showAskDialog"
              >
                🤖 询问此部件
              </button>
            </div>
          </div>
          
          <div v-else class="no-selection">
            <p>点击3D模型中的部件查看详细信息</p>
          </div>
        </div>

        <!-- 警报列表 -->
        <div class="panel-section">
          <h3 class="section-title">
            当前警报 
            <span class="alert-count">{{ activeAlerts.length }}</span>
          </h3>
          <div class="alerts-list">
            <div 
              v-for="alert in activeAlerts" 
              :key="alert.id"
              class="alert-item"
              :class="alert.severity"
              @click="highlightComponent(alert.componentId)"
            >
              <div class="alert-icon">⚠️</div>
              <div class="alert-content">
                <div class="alert-title">{{ alert.title }}</div>
                <div class="alert-time">{{ alert.time }}</div>
              </div>
              <div class="alert-actions">
                <button class="alert-action-btn">详情</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 历史数据 -->
        <div class="panel-section">
          <h3 class="section-title">历史数据</h3>
          <div class="history-controls">
            <select v-model="historyTimeRange" class="time-range-select">
              <option value="1h">过去1小时</option>
              <option value="24h">过去24小时</option>
              <option value="7d">过去7天</option>
              <option value="30d">过去30天</option>
            </select>
            <button class="export-btn">📥 导出</button>
          </div>
          <div class="history-summary">
            <div class="summary-item">
              <span class="summary-label">总运行时间</span>
              <span class="summary-value">1,234.5h</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">故障次数</span>
              <span class="summary-value">3</span>
            </div>
            <div class="summary-item">
              <span class="summary-label">维护次数</span>
              <span class="summary-value">12</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 询问部件对话框 -->
    <div v-if="showAskComponentDialog" class="ask-dialog-overlay" @click="closeAskDialog">
      <div class="ask-dialog" @click.stop>
        <div class="ask-dialog-header">
          <h3>询问 {{ selectedComponent?.name }}</h3>
          <button class="close-btn" @click="closeAskDialog">×</button>
        </div>
        
        <div class="ask-dialog-content">
          <div class="question-examples">
            <p>您可以询问关于此部件的问题，例如：</p>
            <div class="example-questions">
              <button 
                v-for="example in questionExamples" 
                :key="example"
                class="example-btn"
                @click="setQuestion(example)"
              >
                {{ example }}
              </button>
            </div>
          </div>
          
          <div class="question-input">
            <textarea 
              v-model="userQuestion"
              placeholder="请输入您的问题..."
              class="question-textarea"
              rows="3"
            ></textarea>
          </div>
          
          <div class="ask-actions">
            <button class="ask-submit-btn" @click="submitQuestion" :disabled="!userQuestion.trim()">
              🤖 提问
            </button>
          </div>
          
          <div v-if="aiResponse" class="ai-response">
            <h4>AI回答：</h4>
            <div class="response-content">{{ aiResponse }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'

// 响应式数据
const threeDContainer = ref(null)
const currentVehicle = ref({
  name: 'ZTZ-99A主战坦克',
  number: 'T001',
  thumbnail: '/api/placeholder/800/600'
})

const systemStatus = reactive({
  engine: 'normal',
  weapon: 'warning',
  communication: 'normal'
})

const viewAngles = [
  { name: 'front', label: '正视图' },
  { name: 'back', label: '后视图' },
  { name: 'left', label: '左视图' },
  { name: 'right', label: '右视图' },
  { name: 'top', label: '俯视图' },
  { name: 'bottom', label: '底视图' }
]

const currentView = ref('front')
const currentSpecialView = ref('')
const zoomLevel = ref(100)

const selectedComponent = ref(null)
const historyTimeRange = ref('24h')

const activeAlerts = ref([
  {
    id: 1,
    title: '武器系统温度过高',
    component: '主炮控制系统',
    componentId: 'weapon_001',
    severity: 'high',
    time: '2分钟前',
    position: { x: 65, y: 30 }
  },
  {
    id: 2,
    title: '传感器信号异常',
    component: '雷达传感器',
    componentId: 'sensor_001',
    severity: 'medium',
    time: '5分钟前',
    position: { x: 45, y: 20 }
  },
  {
    id: 3,
    title: '轮胎压力低',
    component: '左前轮',
    componentId: 'wheel_001',
    severity: 'low',
    time: '10分钟前',
    position: { x: 25, y: 75 }
  }
])

const showAskComponentDialog = ref(false)
const userQuestion = ref('')
const aiResponse = ref('')

const questionExamples = [
  '这个传感器常见故障有哪些？',
  '如何进行日常维护保养？',
  '正常工作参数范围是多少？',
  '更换周期是多久？'
]

// 方法
const goBack = () => {
  console.log('返回模型库')
  // 路由返回
}

const changeView = (viewName) => {
  currentView.value = viewName
  console.log('切换视角:', viewName)
}

const setSpecialView = (viewType) => {
  if (currentSpecialView.value === viewType) {
    currentSpecialView.value = ''
  } else {
    currentSpecialView.value = viewType
  }
  console.log('设置专项视角:', viewType)
}

const zoomIn = () => {
  if (zoomLevel.value < 200) {
    zoomLevel.value += 10
  }
}

const zoomOut = () => {
  if (zoomLevel.value > 50) {
    zoomLevel.value -= 10
  }
}

const showAlertDetail = (alert) => {
  console.log('显示警报详情:', alert)
  highlightComponent(alert.componentId)
}

const highlightComponent = (componentId) => {
  console.log('高亮组件:', componentId)
  // 模拟选中组件
  selectedComponent.value = {
    id: componentId,
    name: '主炮控制系统',
    type: '武器系统',
    status: 'warning',
    location: '炮塔顶部',
    temperature: 75,
    runtime: 1234.5
  }
}

const getStatusText = (status) => {
  const statusMap = {
    normal: '正常',
    warning: '警告',
    error: '故障',
    maintenance: '维修中'
  }
  return statusMap[status] || status
}

const showAskDialog = () => {
  showAskComponentDialog.value = true
  userQuestion.value = ''
  aiResponse.value = ''
}

const closeAskDialog = () => {
  showAskComponentDialog.value = false
}

const setQuestion = (question) => {
  userQuestion.value = question
}

const submitQuestion = async () => {
  if (!userQuestion.value.trim()) return
  
  // 模拟AI回答
  aiResponse.value = '正在分析...'
  
  setTimeout(() => {
    aiResponse.value = `关于${selectedComponent.value?.name}的问题："${userQuestion.value}"
    
根据维修手册和历史数据分析：

1. 常见故障原因：
   - 长时间高负荷运行导致过热
   - 冷却系统效率下降
   - 电路老化或接触不良

2. 建议处理方案：
   - 立即降低系统负荷
   - 检查冷却系统工作状态
   - 安排专业技术人员检修

3. 预防措施：
   - 定期清洁散热器
   - 每500小时检查电路连接
   - 监控工作温度，避免超负荷运行

如需更详细的技术支持，请联系维修技术人员。`
  }, 2000)
}

onMounted(() => {
  // 初始化3D场景
  console.log('初始化三维可视化页面')
  
  // 模拟选中第一个组件
  setTimeout(() => {
    selectedComponent.value = {
      id: 'default_001',
      name: '发动机控制单元',
      type: '动力系统',
      status: 'normal',
      location: '车体后部',
      temperature: 68,
      runtime: 987.2
    }
  }, 1000)
})
</script>

<style scoped>
.visualization-container {
  width: 94vw;
  height: 100vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 2vw;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.back-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 1vh 1.5vw;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.2vw;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateX(-2px);
}

.vehicle-info h2 {
  margin: 0;
  font-size: 2vw;
}

.vehicle-number {
  font-size: 1.2vw;
  opacity: 0.8;
}

.status-indicators {
  display: flex;
  gap: 2vw;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  padding: 0.5vh 1vw;
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  font-size: 1.1vw;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4CAF50;
}

.status-item.warning .status-dot {
  background: #FF9800;
}

.status-item.error .status-dot {
  background: #F44336;
}

.main-content {
  flex: 1;
  display: flex;
  gap: 2vw;
  padding: 2vh 2vw;
}

.view-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.view-container {
  flex: 1;
  position: relative;
}

.threejs-container {
  width: 100%;
  height: 70vh;
  background: rgba(255,255,255,0.05);
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.2);
}

.model-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
}

.model-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.model-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(0,0,0,0.7);
  padding: 2vh 2vw;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.alert-marker {
  position: absolute;
  cursor: pointer;
  z-index: 10;
}

.alert-pulse {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  animation: pulse 2s infinite;
}

.alert-pulse.high {
  background: #F44336;
  box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
}

.alert-pulse.medium {
  background: #FF9800;
  box-shadow: 0 0 0 0 rgba(255, 152, 0, 0.7);
}

.alert-pulse.low {
  background: #FFC107;
  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(244, 67, 54, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}

.alert-tooltip {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 0.5vh 1vw;
  border-radius: 5px;
  font-size: 0.9vw;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.alert-marker:hover .alert-tooltip {
  opacity: 1;
}

.view-controls, .special-views {
  margin-top: 2vh;
  background: rgba(255,255,255,0.1);
  padding: 1.5vh 1.5vw;
  border-radius: 10px;
  backdrop-filter: blur(10px);
}

.view-controls h4, .special-views h4 {
  margin: 0 0 1vh 0;
  font-size: 1.3vw;
}

.view-buttons {
  display: flex;
  gap: 1vw;
  margin-bottom: 1vh;
  flex-wrap: wrap;
}

.view-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.8vh 1.2vw;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1vw;
  transition: all 0.3s ease;
}

.view-btn:hover, .view-btn.active {
  background: #4CAF50;
  border-color: #4CAF50;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.zoom-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5vh 1vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1vw;
}

.zoom-level {
  font-size: 1.1vw;
  min-width: 50px;
  text-align: center;
}

.special-view-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 1vh 1.5vw;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1vw;
  margin-right: 1vw;
  margin-bottom: 0.5vh;
  transition: all 0.3s ease;
}

.special-view-btn:hover, .special-view-btn.active {
  background: #FF9800;
  border-color: #FF9800;
}

.info-panel {
  width: 35vw;
  background: rgba(255,255,255,0.1);
  border-radius: 15px;
  padding: 2vh 1.5vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  overflow-y: auto;
  max-height: 80vh;
}

.panel-section {
  margin-bottom: 3vh;
}

.section-title {
  font-size: 1.4vw;
  margin-bottom: 1.5vh;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.alert-count {
  background: #F44336;
  color: #fff;
  padding: 0.2vh 0.8vw;
  border-radius: 10px;
  font-size: 1vw;
}

.component-info {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 1.5vh 1.5vw;
}

.component-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
}

.component-header h4 {
  margin: 0;
  font-size: 1.3vw;
}

.component-status {
  padding: 0.3vh 1vw;
  border-radius: 15px;
  font-size: 0.9vw;
  font-weight: 600;
}

.component-status.normal {
  background: #4CAF50;
}

.component-status.warning {
  background: #FF9800;
}

.component-status.error {
  background: #F44336;
}

.component-details {
  margin-bottom: 2vh;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5vh;
  font-size: 1.1vw;
}

.detail-label {
  opacity: 0.8;
}

.detail-value {
  font-weight: 600;
}

.component-charts {
  margin-bottom: 2vh;
}

.component-charts h5 {
  margin: 0 0 1vh 0;
  font-size: 1.2vw;
}

.chart-placeholder {
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 1vh;
}

.chart-line {
  padding: 0.5vh 0;
  font-size: 1vw;
  opacity: 0.8;
}

.ask-btn {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border: none;
  color: #fff;
  padding: 1vh 2vw;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1vw;
  font-weight: 600;
  transition: all 0.3s ease;
  width: 100%;
}

.ask-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
}

.no-selection {
  text-align: center;
  padding: 3vh 0;
  opacity: 0.7;
  font-size: 1.1vw;
}

.alerts-list {
  max-height: 25vh;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 1vh 1vw;
  margin-bottom: 1vh;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.alert-item.high {
  background: rgba(244, 67, 54, 0.2);
  border-left: 4px solid #F44336;
}

.alert-item.medium {
  background: rgba(255, 152, 0, 0.2);
  border-left: 4px solid #FF9800;
}

.alert-item.low {
  background: rgba(255, 193, 7, 0.2);
  border-left: 4px solid #FFC107;
}

.alert-item:hover {
  transform: translateX(5px);
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-size: 1.1vw;
  font-weight: 600;
  margin-bottom: 0.2vh;
}

.alert-time {
  font-size: 0.9vw;
  opacity: 0.7;
}

.alert-action-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5vh 1vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9vw;
}

.history-controls {
  display: flex;
  justify-content: space-between;
  gap: 1vw;
  margin-bottom: 1.5vh;
}

.time-range-select {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.8vh 1vw;
  border-radius: 5px;
  font-size: 1vw;
  flex: 1;
}

.export-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.8vh 1.5vw;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1vw;
}

.history-summary {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1.5vh 1vw;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8vh;
  font-size: 1vw;
}

.summary-label {
  opacity: 0.8;
}

.summary-value {
  font-weight: 600;
}

/* 询问对话框样式 */
.ask-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.ask-dialog {
  background: linear-gradient(135deg, #2a5298, #1e3c72);
  border-radius: 15px;
  width: 60vw;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.ask-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 2vw;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.ask-dialog-header h3 {
  margin: 0;
  font-size: 1.8vw;
}

.close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 2vw;
  cursor: pointer;
  padding: 0.5vh 1vw;
  border-radius: 5px;
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: rgba(255,255,255,0.1);
}

.ask-dialog-content {
  padding: 2vh 2vw;
}

.question-examples {
  margin-bottom: 2vh;
}

.question-examples p {
  margin: 0 0 1vh 0;
  font-size: 1.2vw;
  opacity: 0.9;
}

.example-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw;
}

.example-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.8vh 1.5vw;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1vw;
  transition: all 0.3s ease;
}

.example-btn:hover {
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.question-input {
  margin-bottom: 2vh;
}

.question-textarea {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  color: #fff;
  padding: 1.5vh 1.5vw;
  font-size: 1.2vw;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}

.question-textarea::placeholder {
  color: rgba(255,255,255,0.6);
}

.ask-actions {
  text-align: center;
  margin-bottom: 2vh;
}

.ask-submit-btn {
  background: linear-gradient(45deg, #4CAF50, #45a049);
  border: none;
  color: #fff;
  padding: 1.2vh 3vw;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1.3vw;
  font-weight: 600;
  transition: all 0.3s ease;
}

.ask-submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.ask-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-response {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 2vh 1.5vw;
  border-left: 4px solid #4CAF50;
}

.ai-response h4 {
  margin: 0 0 1vh 0;
  font-size: 1.3vw;
  color: #4CAF50;
}

.response-content {
  font-size: 1.1vw;
  line-height: 1.6;
  white-space: pre-line;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }
  
  .info-panel {
    width: 100%;
    max-height: 50vh;
  }
  
  .ask-dialog {
    width: 90vw;
    margin: 1vh;
  }
  
  .view-buttons {
    flex-direction: column;
  }
  
  .view-btn {
    font-size: 2.5vw;
  }
  
  .status-indicators {
    flex-direction: column;
    gap: 1vh;
  }
}
</style>
